<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>粘连效果</title>
  <style>
    body {
      padding: 50px;
    }
    .stage {
      background: white;
      padding: 30px;
      filter: contrast(28);
    }
    .dot {
      position: relative;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      display: inline-block;
      background: black;
      filter: blur(10px);
    }
    #move{
      position: fixed;
      background: red;
      z-index: 10;
    }
  </style>
</head>
<body>

<div class="stage">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot" id="move"></div>
</div>

<script>
  var m = document.getElementById('move');
  
  m.addEventListener('mousemove', function (e) {
    this.style.left = e.clientX - 25 + 'px';
    this.style.top = e.clientY - 25 + 'px';
  }, false);
</script>
<!--

http://svgtrick.com/

  -->
</body>
</html>